/**
 * Shopware 5
 * Copyright (c) shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage MediaManager
 * @version    $Id$
 * @author shopware AG
 */
@mixin shopware-mediamanager {
    .#{$prefix}media-manager-window {

		.small-preview-image {
			display: inline-block;
			background: #fff;
			border: 1px solid #ACBBC6;

			img {
				display: block;
			}
		}

        /** Toolbar styling */
        .#{$prefix}toolbar {
        	@include reset-box-shadow;
        	@include reset-border-radius;
            border: 0 none;
            padding-bottom: 4px;
            border-bottom: 1px solid $border-color !important;

            .#{$prefix}form-item-label {
	            margin-top: 2px;
            }

            /** File Upload button */
            table[id^=filefield] td.#{$prefix}form-item-body {
	            background: transparent;
	            padding: 0;

	            td[id$="browseButtonWrap"] {
		            border-left: 0 none;
	            }
            }

            /** Special button which features the file input */
            .shopware-ui-toolbar-small-icon-text-left {
                margin: 0 8px 0 0;

                .#{$prefix}btn-inner {
                    color: $font-color;
                    font-size: 11px;
                    padding: 0 6px 0 20px;
                }

                /** Icon */
                .#{$prefix}btn-icon {
                    position: absolute;
                    left: 0; top: 0px;
                    width: 16px; height: 16px;
                    display: block;
                }
            }
        }

        /** Tree panel */
        div[id^=mediamanager-album-tree] {

        	/** Toolbar top */
	    	.#{$prefix}toolbar {
	        	border-bottom: 0 none !important;
	        }
	        .#{$prefix}grid-header-ct .#{$prefix}box-inner {
	        	padding: 1px 0;
		        border-bottom-color: $border-color;
	        }

			.#{$prefix}panel-body {
				border-bottom: 0 none;
			}

	        /** Bottom toolbar */
	        .#{$prefix}toolbar-default-docked-bottom {
	        	padding: 5px 0 5px;
	        }
        }

        /** Paging toolbar */
        .#{$prefix}toolbar-default-docked-bottom {
        	@include reset-box-shadow;
        	border-top: 1px solid $border-color !important;
        	border-bottom: 0 none !important;

            /** Media per page combobox */
            .#{$prefix}page-size {
                .#{$prefix}form-text {
                    font-size: 11px;
                    color: $font-color;
                }
            }
        }

		.#{$prefix}grid-with-row-lines {
			border: 0 none !important;
		}
    }

    /** Dataview */
    div[id^=mediamanager-media-view] .#{$prefix}panel-body .#{$prefix}component {

    	.empty-text {
    		@include border-radius(2px);
    		@include inner-border(1px 1px 1px 1px, #f5f7f8);
    		top: 50%; left: 50%;
    		width: 150px;
    		margin: 0 0 0 -75px;
    		position: absolute;
	    	border: 1px solid lighten(#919da6, 20%);
	    	padding: 6px;

	    	span {
		    	display: block;
		    	background: #f0f2f4;
		    	color: lighten($font-color, 15%);
		    	text-shadow: 0 1px 0 #fff;
		    	font: 11px/18px Arial, Verdana, sans-serif;
		    	text-align: center;
		    	padding: 4px 0;
	    	}
    	}
    }

    /** Album settings */
    div[id^=mediamanager-album-setting] .#{$prefix}toolbar-docked-bottom {
    	@include border-radius(0 0 5px 5px);
	    border-top: 1px solid $border-color !important;
    }

    /** Media selection */
    .#{$prefix}media-manager-selection {
        .#{$prefix}grid-body {
            border-bottom: 0 none;
        }

        .#{$prefix}window-body-default {
            border-bottom: 1px solid $border-color !important;
        }

        .#{$prefix}toolbar-docked-bottom {
            @include shopware-button;
        }
    }

    /** More information panel (on the right hand of the module) */
    .#{$prefix}more-info {
	    border-left: 1px solid $border-color;

	    .outer-media-info-pnl {
		    border-top: 1px solid $border-color;
	    }

	    .#{$prefix}panel-header {
		    border-left: 0 none;
		    border-right: 0 none;
	    }

		.#{$prefix}panel-body {
			border-left: 0 none
		}

	    input[type=text] {
		    background: #eef1f4;
		    color: $font-color;
		    border: 1px solid $border-color;
		    border-right: 0 none;
		    border-bottom: 0 none;
		    padding: 4px 6px;
	    }

    }

    /** Icons */
    .icon-pdf, .icon-video, .icon-music, .icon-archive, .icon-unknown {
	    width: 70px;
	    height: 70px;
	}
	.icon-pdf { background: theme-image($theme, 'media_manager_icon_pdf.png') no-repeat }
	.icon-video { background: theme-image($theme, 'media_manager_icon_video.png') no-repeat }
	.icon-music { background: theme-image($theme, 'media_manager_icon_music.png') no-repeat }
	.icon-archive { background: theme-image($theme, 'media_manager_icon_archive.png') no-repeat }
	.icon-unknown { background: theme-image($theme, 'media_manager_icon_notdetected.png') no-repeat }

	.thumb-wrap {
	    width: 79px;
	    display: block;
	    float: left;
	    margin: 10px;

	    .thumb {
	        border: 1px solid #acbbc6;
	        background: theme-image($theme, 'media_manager_image_bg_small.png') no-repeat;
	        height: 72px;
	        width: 72px;
	        margin: 0 auto 4px;
	        -webkit-transition: border linear 0.18s, box-shadow linear 0.18s;
	        -moz-transition: border linear 0.18s, box-shadow linear 0.18s;
	        -ms-transition: border linear 0.18s, box-shadow linear 0.18s;
	        -o-transition: border linear 0.18s, box-shadow linear 0.18s;
	        transition: border linear 0.18s, box-shadow linear 0.18s;

	        .inner-thumb {
	            height: 72px;
	            width: 72px;
	            display: table-cell;
	            vertical-align: middle;
	            text-align: center;
	            img {
                    max-height: 70px;
                    max-width: 70px;
                }
	        }
	    }

	    .x-editable {
	        color: #6c818f;
	        font-size: 11px;
	    }

	    // Selected mode
	    &.#{$prefix}item-selected {
	        .thumb {
	            @include single-box-shadow(#189eff, 0, 0, 5px);
	            border-color: #189eff;
	        }
	    }
	}

	.thumb-wrap-tiny {
	    width: 44px;
	    display: block;
	    float: left;
	    margin: 10px;

	    .thumb {
	        border: 1px solid #acbbc6;
	        width: 44px;
	        height: 44px;
	        background: theme-image($theme, 'media_manager_image_bg_tiny.png') no-repeat;
	        position: relative;

	        .number {
	            @include border-radius(20px);
	            display: block;
	            width: 20px; height: 20px;
	            line-height: 20px;
	            background: #acbbc6;
	            color: #fff;
	            font-weight: bold;
	            text-align: center;
	            position: absolute;
	            top: 50%; left: 50%;
	            margin: -10px 0 0 -10px;

	        }
	    }

	    .x-editable {
	        display: block;
	        width: 44px;
	        text-algin: center;
	        color: #6c818f;
	        font-size: 11px;
	    }

	}

	.outer-media-info-pnl, .#{$prefix}outer-customer-info-pnl {
	    background: #fff;
	    padding: 10px;

	    .thumb {
	        border: 1px solid #acbbc6;
	        width: 155px;
	        height: 155px;
	        margin: 0 0 0 16px;
	        background: theme-image($theme, 'media_manager_image_bg_big.png') no-repeat;

	        .inner-thumb {
	            width: 155px;
	            height: 155px;
	            display: table-cell;
	            vertical-align: middle;
	            text-align: center;
                img {
                    max-height: 153px;
                    max-width: 152px;
                }
	        }
	    }

		.link {
			color: #009CFF;
		}

	    .icon {
	        background: #EEF1F4;
	        display: table-cell;
	        vertical-align: middle;
	        text-align: center;

	        div {
	            margin: 0 auto;
	        }
	    }

	    .base-info {
	        margin: 20px 0 0;

	        p {
	            font-size: 11px;
	            margin: 0 0 14px;
	            position: relative;

	            strong { font-weight: 700; color: #475c6a; display: block; margin: 0 0 2px }
	            span { color: #6c818f; display: block; }
	            input { width: 100%; }

	            .copy-image-path {
	                position: absolute;
	                right: 0;
	                color: #189eff;

	                &:hover { text-decoration: underline }
	            }
	        }

	    }
	}

	.icon-selection {
	    .x-form-item label {
	        display: inline-block;

	        span {
	            top: 4px;
	            display: inline-block;
	            height: 16px;
	            width: 16px;
	            position: relative;
	        }
	    }
	}
}
